import VueRouter from "vue-router";
import Vue from "vue";
/* 
  路由懒加载:
    结合 Vue 的异步组件和 Webpack 的代码分割功能，实现路由组件的懒加载
    - 不再使用import模板化语法引入路由组件
    - 而是定义一个当前组件对应的函数,函数内部异步使用import方法引入组件,并返回promise实例即可
    - 当路由被切换需要加载当前路由的时候,就会调用当前函数
*/
const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFound/404");
const MusicDetail = () => import("@/pages/Home/Music/MusicDetail")
const NewsDetail = () => import("@/pages/Home/News/NewsDetail");
const GameDetail = () => import("@/pages/Home/Game/GameDetail");

//  应用路由插件(比如注册一些router提供的全局组件等等...)
Vue.use(VueRouter);

//  创建路由器对象，并在内部配置模式和路由表
const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/",
            redirect: "/Home",
        },
        {
            path: "/Home",
            component: Home,
            //二级路由配置
            children: [
                {
                    path: "News", //
                    component: News,
                    name: "News",
                    children: [
                        {
                            path: "NewsDetail",
                            component: NewsDetail,
                            name: "NewsDetail",
                            // props传参
                            props: (route) => {
                                //如果props是一个函数,则可以在内部接受到当前路由组件的$route对象
                                console.log(route, "route");
                                return {
                                  ...route.params,
                                  ...route.query,
                                  classRoom: "0516",
                                  count: "71",
                                };
                              },
                        }
                    ]
                },
                {
                    path: "Music",
                    component: Music,
                    name: "Music",
                    children: [
                        {
                            path: "MusicDetail/:id/:age?",
                            component: MusicDetail,
                            name: "MusicDetail",
                            // props:true代表可以用props的方式传递参数
                            props: true,
                        }
                    ]
                },
                {
                    path: "Game",
                    component: Game,
                    name: "Game",
                    children: [
                        {
                            path: "GameDetail",
                            component: GameDetail,
                            name: "GameDetail",
                            // 元信息
                            meta: {
                                hidden: true,
                                icon: "plus"
                            },
                            props: (route) => {
                                return {
                                    ...route.meta
                                }
                            }
                        }
                    ]
                },
                /* 默认子路由写法1:重定向推荐写法 */
                {
                    path: "",
                    redirect: "News",
                },
                /* 默认子路由写法2:直接定向设置组件写法 */
                /* {
                  path: "",
                  component: News,
                }, */
            ],
        },
        {
            path: "/Login",
            component: Login,
            name: "Login",
            //路由独享守卫
            beforeEnter: (to, from, next) => {
                console.log(to, from, next);
                console.log("我是login的独享守卫");
                next();
            },
        },

        //  404配置卸载最下边
        {
            path: "/*",
            component: NotFound,
        },
    ],
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
    console.log(to, from, next, "全局前置守卫");
    next()
})

// 全局解析守卫:
/*  to:要去的路由对象
    from:来源的路由对象
    next:是一个函数,必须书写,否则直接停止到当前位置
      + next():直接放行
      + next(false):中断当前导航
      + next(string|location):指定导航地址 */
router.beforeResolve((to, from, next) => {
    console.log(to, from, next,"全局解析守卫");
    next()
})

// 全局后置钩子
router.afterEach((to, from) => {
    console.log(to, from, "全局后置守卫");
});

//  暴露router，注入到vue实例中
export default router;
